<template>
    <div class="box">
        <div class="label-box">
            <div>
                <label>收货人</label>
                <input type="text" v-model="receiver.name" placeholder="请输入收货人的姓名">
            </div>
            <div>
                <label>联系电话</label>
                <input type="text" v-model="receiver.phone" placeholder="请输入收货人的联系电话">
            </div>
            <div @click="areaShow = true">
                <label>所在地区</label>
                <input disabled="disabled" type="text" v-model="receiver.area">
                <van-icon name="arrow" />
            </div>
            <div>
                <label>详细地址</label>
                <input type="text" v-model="receiver.addresse" placeholder="请输入详细地址">
            </div>
            <div class="gray-box"></div>
            <div>
                <label class="default">设为默认地址</label>
                <van-switch v-model="isDefault" size="24px" active-color="#0AD28E" />
            </div>
        </div>
        <div class="btn-box">
            <button>保存</button>
        </div>
        <!--省市选择-->
        <van-popup v-model="areaShow" position="bottom">
            <van-area :area-list="areaList"  title="选择城市" value="110101" @cancel = 'cityCancel' @confirm="cityConfirm"/>
        </van-popup>
    </div>
</template>

<script>
    import areaList from '../../assets/js/area'
    export default {
        name: "add",
        data(){
            return{
                receiver:{},
                areaShow:false,//省市地址弹窗
                areaList,
                isDefault:false,//是否默认地址
            }
        },
        methods:{
            cityConfirm(picker){
                this.receiver.area = picker[0].name + picker[1].name +picker[2].name
                this.areaShow = false
            },
            cityCancel(){
                this.areaShow = false
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "@/assets/css/public";
.box{
    .label-box >div{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: vw(100);
        padding: 0 vw(20);
        border-bottom: 1px solid $gray_bg;
        font-size: vw(32);
        color: #333;
        &.gray-box{
            height: vw(20);
        }
        label{
            width: vw(190);
            &.default {
                width: vw(240);
            }
        }
        input{
            flex: 1;
            font-size: vw(26);
            &:disabled {
                background-color: #fff;
            }
        }
    }
    .btn-box {
        position: fixed;
        left: vw(20);
        bottom: vw(10);
        button{
            width: vw(710);
            height: vw(78);
            -webkit-border-radius: vw(39);
            -moz-border-radius: vw(39);
            border-radius: vw(39);
            background:$orgGradientBg;
            color: #fff;
            font-size: vw(32);
        }
    }
}
</style>